<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
        float:left;
        width:280px;
        height:170px;
        border:1px solid red;
        }
    </style>
</head>
<body>
    <div style="background-color:dodgerblue">
        <div  class="c1"></div>
        <div class="c1"></div>
        <div style="clear:both"></div>
<!-- float属性可以让元素脱离常规文档流，但其他内容可能会检测其占据的空间（如后续的行内元素（如文本、<span>）或浮动元素会检测到这个被占据的空间，并自动“绕开”它，形成环绕效果。
后续的块级元素（如 <div>）则会忽略浮动元素占据的空间，可能被浮动元素覆盖（除非也设置为浮动或定位），行内元素和块级元素均可设置浮动，行内元素设置浮动后，会自动变为块级元素，可设置宽高和边距。
）。属性值主要有以下几个：-->
<!-- 1.left：元素向左浮动，腾出右侧空间供其他元素使用。左浮动的元素会紧贴其前面的浮动元素或容器的左边界。-->
<!-- 2.right：元素向右浮动，腾出左侧空间供其他元素使用。右浮动的元素会紧贴其前面的浮动元素或容器的右边界。-->
<!-- 3.none：这是float属性的默认值，表示元素不浮动，按照正常的文档流进行排列。-->
<!-- 4.inherit：元素继承其父元素的float属性值。-->
<!-- clear: both; 强制当前元素移动到其前面所有左浮动（float: left）和右浮动（float: right）元素的下方，避免内容重叠或布局错乱，确保元素在其前面的所有浮动元素之后开始新的行，可以清除这些浮动元素对当前元素布局的影响(虽然块级元素的高度可以设置，但在某些情况下不设置父容器的高度，如果父容器内部的所有子元素都浮动或绝对定位，且没有非浮动或相对定位的子元素来撑开父容器的高度，那么父容器的高度会塌陷为0。这是因为在这种情况下，父容器无法感知脱离常规文档流的元素，导致高度计算为 0，在父容器内容的末尾插入一个清除浮动的元素，强制父容器扩展高度，包裹所有浮动子元素（类似“收尾”操作）。)-->
    <!-- 
    clear: both; 清除浮动的工作原理
    1，检测浮动元素
    浏览器会扫描当前元素之前的所有浮动元素（无论是 float: left 还是 float: right）。
    2，计算下方位置
    当前元素会移动到所有浮动元素底部边缘的下方，确保不与任何浮动元素重叠。
    3，创建新行
    当前元素会从新行开始显示，类似于 display: block 的行为。 -->
    <!-- 清除浮动 -->
    <!-- 方法一，额外标签法：在父元素内容的最后添加一个块级元素，设置CSS属性clear: both -->
    <!-- 方法二，单伪元素法：.clearfix::after {content: ""; display: block; clear: both;} -->
    <!-- 方法三，双伪元素法：.clearfix::before,.clearfix::after {content: ""; display: table;} /* 触发BFC */
                           .clearfix::after {clear: both;} /* 清除浮动 */-->
    <!-- 方法四，溢出隐藏：父元素添加CSS属性overflow: hidden 通过触发父容器的 BFC（块级格式化上下文），强制父容器包裹浮动元素，从而解决高度塌陷问题，但内容环绕效果依然存在-->

<!-- CSS3 弹性盒子布局（ Flexible Box 或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。Flex布局不会产生浮动布局中脱离常规文档流的现象，因此不会引发父容器高度塌陷等问题，布局网页更简单，更灵活 -->
<!-- 弹性盒子由弹性容器(Flex container)和弹性项目(Flex item)组成。 -->
<!-- 弹性容器通过设置 display 属性的值为 flex 或 inline-flex将其定义为弹性容器，其直接子元素自动成为弹性项目，弹性项目可以自动挤压或拉伸，也可设置宽高和边距 -->
<!-- 弹性容器默认沿主轴（Main Axis）排列弹性项目 -->
<!-- 主轴(Main Axis)：弹性项目排列的主要方向（默认水平从左到右，由 flex-direction 控制）。 -->
<!-- 交叉轴(侧轴)(Cross Axis)：与主轴垂直的方向，默认垂直从上到下。 -->

<!-- justify-content 属性：弹性项目在弹性容器主轴的对齐方式 -->
        <!-- 属性值： -->
        <!-- flex-start（默认值），弹性项目紧贴主轴起点左对齐。-->
        <!-- flex-end，弹性项目紧贴主轴终点右对齐。 -->
        <!-- center，弹性项目沿主轴居中排列。 -->
        <!-- space-between，弹性项目沿主轴均匀排列，空白间距均分在每个弹性项目之间，首尾项目紧贴容器边缘。 -->
        <!-- space-around，弹性项目沿主轴均匀排列，空白间距均分在每个弹性项目两侧，弹性项目之间的间距是弹性项目与弹性容器边缘间距的两倍 -->
        <!-- space-evenly，弹性项目沿主轴均匀排列，弹性项目与容器之间间距相等。 -->

<!-- align-items 属性：弹性项目在弹性容器侧轴的对齐方式(给弹性容器设置) -->
<!-- align-self 属性：单独控制某个弹性项目的侧轴对齐方式(给弹性项目设置，会覆盖容器的 align-items 属性) -->
        <!-- 属性值： -->
        <!-- stretch（默认值），弹性项目被拉伸至铺满弹性容器侧轴方向的空间(需弹性项目侧轴方向未设置固定尺寸)。 -->
        <!-- center，弹性项目沿侧轴居中排列。 -->
        <!-- flex-start，弹性项目从侧轴起点开始依次排列。 -->
        <!-- flex-end，弹性项目从侧轴终点开始依次排列。 -->

<!-- flex-direction 属性：修改主轴方向。(侧轴方向会自动变换) -->
        <!-- 属性值： -->
        <!-- row（默认值），水平方向，从左到右 -->
        <!-- column，垂直方向，从上到下 -->
        <!-- row-reverse，水平方向，从左到右 -->
        <!-- column-reverse，垂直方向，从下到上 -->

<!-- flex 属性：控制弹性项目的主轴方向的尺寸（给弹性项目设置，它是flex-grow、flex-shrink和flex-basis三个子属性的简写） -->
        <!-- 属性值： -->
        <!-- 支持 单值、双值 或 三值 写法。 -->
        <!-- 默认值：flex: 0 1 auto（不放大、允许缩小、基准大小为内容宽度）。 -->
        <!-- flex-grow（放大比例），定义项目在容器有剩余空间时的放大比例。数值表示的是分配剩余空间的权重比例，而非直接按数值倍数扩展，例如：两个项目分别为 flex-grow: 2 和 flex-grow: 1，前者分得2/3剩余空间，后者分得1/3。 -->
        <!-- flex-shrink（缩小比例），定义项目在容器空间不足时的缩小比例。比例计算逻辑与 flex-grow 类似。 -->
        <!-- flex-basis（基准大小），定义项目在分配空间前的初始大小。 -->

<!-- flex-wrap 属性：控制弹性项目主轴方向超出弹性容器时是否换行。 -->
        <!-- 属性值： -->
        <!-- nowrap（默认值），不换行，所有项目挤在一行或一列(取决于 flex-direction，若空间不足，项目会被压缩（根据 flex-shrink 属性）或溢出容器) -->
        <!-- wrap，换行(新行的方向与主轴方向一致) -->

<!-- align-content 属性：控制多行弹性项目在侧轴方向上的对齐方式。仅当弹性容器存在多行项目时生效，单行不生效（即 设置了flex-wrap: wrap 或 wrap-reverse并且形成了多行） ，否则此时，容器的侧轴对齐方式完全由 align-items 属性控制-->
        <!-- 属性值： -->
        <!-- 与justify-content属性值相同 -->
</div>
</body>
</html>